<template>
    <panel title="修改密码">
         <el-form
        :model="formData"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码" prop="oldPwd">
          <el-input v-model="formData.oldPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="formData.newPwd"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="newPwd1">
          <el-input v-model="formData.newPwd1"></el-input>
        </el-form-item>
 
        <el-form-item>
          <el-button type="primary" @click="editBtn">
            立即修改</el-button>
        </el-form-item>
      </el-form>
    </panel>
</template>

<script>
import { editpwd } from "../../api/account.api.js";
export default {
  data() {
    const checkNewPwd1 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入确认密码"));
      }
      if (value != this.formData.newPwd) {
        callback(new Error("两次输入的密码不一致！"));
      }
      callback();
    };
    return {
      formData: {
        newPwd: "",
        id: "",
        oldPwd: "",
        newPwd1: ""
      },
      rules: {
        newPwd: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        oldPwd: [{ required: true, message: "请输入老密码", trigger: "blur" }],
        newPwd1: [{ validator: checkNewPwd1, trigger: "blur" }]
      }
    };
  },
  methods: {
    editBtn() {
      this.$refs.form.validate(async res => {
        if (res) {
          let res = await editpwd(this.formData);
          let { code, msg } = res.data;
          if (code == 0) {
            this.$message.success("修改密码成功，请重新登录");
            localStorage.clear();
            // 跳转到登录页
            this.$router.push("/login");
          } else {
            this.$message.error(msg);
          }
        }
      });
    }
  },
  created() {
    this.formData.id = localStorage.getItem("id");
  }
};
</script>

<style lang="less" scoped>
</style>